<script setup lang="ts">

import {message} from "ant-design-vue";
import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import KPIChart from "~/contentScripts/views/sycm/item_monitor/SycmItemAnalysisKPI/KPIChart.vue";
import {SYCMItemLists, SycmItemMonitor} from "~/contentScripts/views/sycm/item_monitor/SycmItemMonitor";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const dataSource = ref<Array<any>>([]);
const items = ref<SYCMItemLists>();
const columns = ref<Array<any>>([]);
/**
 * 计算表格列
 */
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'item',
      title: '商品名称',
      width: 300,
      dataType: 'product',
      fixed: 'left',
      sorter: (a: any, b: any) => a.item.title.localeCompare(b.item.title),
      dataField: {
        item_pic: 'item.pictUrl',
        item_url: 'item.detailUrl',
        item_title: 'item.title',
      }
    },
    {
      dataIndex: 'type',
      title: '类型',
      width: 100,
      fixed: 'left',
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: 'custom',
      slot: 'type'
    },
    {
      dataIndex: "fullDate",
      title: "日期",
      fixed: 'left',
      width: 140,
      sorter: (a: any, b: any) => a.fullDate.localeCompare(b.fullDate),
    },
    {
      dataIndex: 'tradeIndex',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex - b.tradeIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (text === null) {
          return '-';
        }
        return SycmTableUtils.tranNumber(showZs.value, text);
      }
    },
    {
      dataIndex: 'uvIndex',
      title: showZs.value ? '访客指数' : '访客数',
      sorter: (a: any, b: any) => a.uvIndex - b.uvIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (text === null) {
          return '-';
        }
        return SycmTableUtils.tranNumber(showZs.value, text);
      }
    }, {
      dataIndex: 'seIpvUvHits',
      title: showZs.value ? '搜索人气' : '搜索人数',
      sorter: (a: any, b: any) => a.seIpvUvHits - b.seIpvUvHits,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (text === null) {
          return '-';
        }
        return SycmTableUtils.tranNumber(showZs.value, text);
      }
    },
    {
      dataIndex: 'cltHits',
      title: showZs.value ? '收藏人气' : '收藏人数',
      sorter: (a: any, b: any) => a.cltHits - b.cltHits,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (text === null) {
          return '-';
        }
        return SycmTableUtils.tranNumber(showZs.value, text);
      }
    },
    {
      dataIndex: 'cartHits',
      title: showZs.value ? '加购人气' : '加购人数',
      sorter: (a: any, b: any) => a.cartHits - b.cartHits,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (text === null) {
          return '-';
        }
        return SycmTableUtils.tranNumber(showZs.value, text);
      }
    },
    {
      dataIndex: 'payRateIndex',
      title: showZs.value ? '支付转化指数' : '支付转化率',
      sorter: (a: any, b: any) => a.payRateIndex - b.payRateIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (text === null) {
          return '-';
        }
        return SycmTableUtils.tranRatio(showZs.value, text);
      }
    },
    {
      dataIndex: 'payByrCnt',
      title: '支付买家数',
      sorter: (a: any, b: any) => a.payByrCnt - b.payByrCnt,
      align: 'right',
    },
    {
      dataIndex: 'payItemCnt',
      title: '支付件数',
      sorter: (a: any, b: any) => a.payItemCnt - b.payItemCnt,
      align: 'right',
    },
    {
      dataIndex: 'customerPrice',
      title: '客单价',
      sorter: (a: any, b: any) => a.customerPrice - b.customerPrice,
      align: 'right',
    },
    {
      dataIndex: 'uvValue',
      title: 'UV价值',
      sorter: (a: any, b: any) => a.uvValue - b.uvValue,
      align: 'right',
    },
    {
      dataIndex: 'searchRate',
      title: '搜索占比',
      sorter: (a: any, b: any) => a.searchRate - b.searchRate,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return `${(text * 100).toFixed(2)}%`;
      }
    },
    {
      dataIndex: 'collectionRate',
      title: '收藏率',
      sorter: (a: any, b: any) => a.collectionRate - b.collectionRate,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return `${(text * 100).toFixed(2)}%`;
      }
    },
    {
      dataIndex: 'addCartRate',
      title: '加购率',
      sorter: (a: any, b: any) => a.addCartRate - b.addCartRate,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return `${(text * 100).toFixed(2)}%`;
      }
    },
    {
      dataIndex: 'collectionAddCart',
      title: '收藏加购人数',
      sorter: (a: any, b: any) => a.collectionAddCart - b.collectionAddCart,
      align: 'right',
    },
    {
      dataIndex: 'collectionAddCartRate',
      title: '收藏加购率',
      sorter: (a: any, b: any) => a.collectionAddCartRate - b.collectionAddCartRate,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return `${(text * 100).toFixed(2)}%`;
      }
    }
  ]
}
const calcDataSource = () => {
  dataSource.value = [];
  if (!items.value) {
    return;
  }
  items.value?.item?.trendData?.map((d, index) => {
    if (items.value?.item2 && items.value?.item2?.trendData) {
      dataSource.value.push({
        item: items.value?.item2,
        type: '竞品2',
        ...items.value?.item2?.trendData[index],
      })
    }
    if (items.value?.item1 && items.value?.item1?.trendData) {
      dataSource.value.push({
        item: items.value?.item1,
        type: '竞品1',
        ...items.value?.item1?.trendData[index],
      })
    }
    dataSource.value.push({
      item: items.value?.item,
      type: '本品',
      ...d,
    })
  })
  dataSource.value.reverse();
}

const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    loading.value = true;
    const data = await SycmItemMonitor.assignItemTrendData(await SycmItemMonitor.getItems());
    if (!data) {
      message.error('获取数据失败,请重试！');
      loading.value = false;
      return;
    }
    console.log(data);
    items.value = data;
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, (val) => {
  calcColumns();
  calcDataSource();
})
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞争商品-竞品分析-关键指标对比`" width="95%" style="top: 20px;"
                  v-model:visible="visible"
    >
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="max-height: calc(100vh - 110px);min-height:750px;overflow-y: auto;">
        <KPIChart :items="items" :show-zs="showZs"/>
        <base-table table-name="竞争-竞争商品-竞品分析-关键指标对比" :columns="columns" :data-source="dataSource"
                    :scroll="{
        // y:750,
        x: 2300,
        y:400
      }"
        >
          <template #type="row">
            <a-tag v-if="row.type==='本品'" color="blue">{{ row.type }}</a-tag>
            <a-tag v-if="row.type==='竞品1'" color="green">{{ row.type }}</a-tag>
            <a-tag v-if="row.type==='竞品2'" color="orange">{{ row.type }}</a-tag>
          </template>
        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
